import React, { useState } from 'react'
import './YlIndex.css'
import { Tabs } from "antd";
import type { TabsProps } from 'antd';
import { Switch } from 'antd';
import { Button, Modal } from 'antd';
export default function YlIndex() {
    const [status, setStatus] = useState<Boolean>(false)
    const [status1, setStatus1] = useState<Boolean>(false)
    const ChangeStatus = () => {
        setStatus(!status)
    }
    const ChangeStatus1 = () => {
        setStatus1(!status1)
    }
    // 弹框1
    const [isModalOpen, setIsModalOpen] = useState(false);

    const showModal = () => {
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    //弹框2
    const [isModalOpen1, setIsModalOpen1] = useState(false);

    const showModal1 = () => {
        setIsModalOpen1(true);
    }
    const handleOk1 = () => {
        setIsModalOpen1(false);
    }

    const handleCancel1 = () => {
        setIsModalOpen1(false);
    }

    const onChange = (key: string) => {
        console.log(key);
    };
    const onChange1 = (checked: boolean) => {
        console.log(`switch to ${checked}`);
    }

    const items: TabsProps['items'] = [
        {
            key: '1',
            label: '公开发布',
            children: <div>
                <div>
                    <p>公开发布（未开启）</p>
                    <div style={{ display: "flex", justifyContent: "space-between" }}>
                        <p style={{ color: "grey" }}>开启后，获得链接的人可以访问</p>
                        <Switch defaultChecked onChange={onChange1} style={{ width: "50px", height: "22px", borderRadius: "10px", marginRight: "20px" }} />
                    </div>
                    <hr style={{ marginTop: "10px", width: "95%", borderColor: "rgba(253, 253, 253,0.5)" }}></hr>
                    <div>

                        <p>微信、金山App扫码分享</p>
                    </div>
                </div>
            </div>,
        },
        {
            key: '2',
            label: '诚邀协作',
            children: <div></div>,
        },
    ];

    return (
        <div className="body">
            <div className="yl-header">
                <div className="yl-header-box1">
                    <img src="../public/yl/image.png" title="" style={{ width: "40px", height: "40px", marginTop: "5px" }} />
                    <h3>金山文档 | WPS云文档</h3>
                </div>
                <input type="text" placeholder="通过文件名、正文、创建者搜索文档" />
                <div className="yl-header-box2">
                    <p style={{ marginTop: "-10px", color: "rgb(228,127,66)" }}>个人中心</p>
                    <button>模板库</button>
                    <img src="../public/yl/分享.png" title="分享" onClick={() => {
                        ChangeStatus()
                    }} />
                    {
                        status ? <div className="sharebox">
                            <Tabs defaultActiveKey="1" items={items} onChange={onChange} style={{ marginLeft: "30px", marginTop: "10px" }} />
                        </div> : ""
                    }
                    <img src="../public/yl/铃声.png" title="消息" />
                    <img src="../public/yl/列表.png" title="功能推荐" />
                    <img src="../public/yl/主菜单.png" title="主菜单" />
                    <img src="../public/yl/头像.png" title="" style={{ borderRadius: "50%", width: "30px", height: "30px", marginTop: "0px" }} />
                </div>
            </div>
            <div className="yl-left">
                <button className="but1" onClick={showModal}><img src="../public/yl/加号.png" style={{ width: "15px", height: "15px", position: "absolute", left: "98px", top: "58px" }} ></img>新建</button><br></br>
                <Modal title="新建文件夹" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                    <p>文件夹名</p>
                    <input style={{ width: "450px", height: "28px", marginTop: "10px", marginBottom: "10px" }} placeholder='输入文件夹名'></input><br></br>
                    <p>位置</p>
                    <select style={{ width: "450px", height: "28px", marginTop: "10px", marginBottom: "10px" }} onClick={() => {
                        showModal1()
                        setIsModalOpen(false)
                    }}>
                        <option>我的文档</option>

                    </select><br></br>
                </Modal>
                <Modal title="新建文件夹至" open={isModalOpen1} onOk={handleOk1} onCancel={handleCancel1}>
                    <div className='wen-left'>
                        <div className="yl-left-box1">
                            <p><img src="../public/yl/时间.png"></img>最近</p>
                            <p><img src="../public/yl/星星.png"></img>星标</p>
                            <p><img src="../public/yl/数据共享.png"></img>共享</p>
                        </div>
                        <div className='yl-left-box2'>
                            <p><img src="../public/yl/文件.png"></img>我的云文档</p>
                            <p><img src="../public/yl/团队.png"></img>团队文档</p>
                            <p><img src="../public/yl/云下载.png" style={{ width: "20px", height: "20px" }}></img>我的设备</p>
                            <p><img src="../public/yl/固定住.png"></img>常用</p>
                            <p><img src="../public/yl/标签.png"></img>标签</p>
                            <p style={{ marginTop: "30px" }}><img src="../public/yl/回收站.png"></img>回收站</p>
                        </div>
                    </div>
                </Modal>
                <button><img src="../public/yl/导入.png" style={{ width: "15px", height: "15px", position: "absolute", left: "98px", top: "98px" }}></img>导入</button>
                <div className="yl-left-box1">
                    <p><img src="../public/yl/时间.png"></img>最近</p>
                    <p><img src="../public/yl/星星.png"></img>星标</p>
                    <p><img src="../public/yl/数据共享.png"></img>共享</p>
                </div>
                <div className='yl-left-box2'>
                    <p><img src="../public/yl/文件.png"></img>我的云文档</p>
                    <p><img src="../public/yl/团队.png"></img>团队文档</p>
                    <p><img src="../public/yl/云下载.png" style={{ width: "20px", height: "20px" }}></img>我的设备</p>
                    <p><img src="../public/yl/固定住.png"></img>常用</p>
                    <p><img src="../public/yl/标签.png"></img>标签</p>
                    <p style={{ marginTop: "30px" }}><img src="../public/yl/回收站.png"></img>回收站</p>
                </div>
            </div>
            <div className="yl-content">
                <div className="yl-content-box1">
                    <h3>最近</h3>
                    <img src="../public/yl/刷新.png" title="" style={{ width: "15px", position: "absolute", left: "70px", top: "26px" }} />
                    <div className='yl-content-box2'>
                        <p>全部类型</p>
                        <div className='yl-content-box3'>
                            <p>文件位置</p>
                            <p>创建者</p>
                            <p>最后修改</p>
                            <p>大小</p>
                            <div>
                                <img src="/../public/yl/列表.png" title="" style={{ marginLeft: "50px" }} />
                                <img src="/../public/yl/警告.png" title="" />
                            </div>
                        </div>
                    </div>
                    <hr className='hr' />
                </div>

            </div>
        </div>
    )
}
